<template>
  <div class="wrap">
      <div class="title">
          <van-icon name="arrow-left"  @click="back()"/>
          <h4>订单详情</h4>
      </div>
      <div class="card_box">
          <div class="card">
              <div class="top">
                  <div class="name">王先生</div>
                  <div class="start">

                  </div>
              </div>
              <div class="mid">
                  <div class="one">
                      <div class="up">1万</div>
                      <div class="down">金额</div>
                  </div>
                  <div class="two">
                      <div class="up">12个月</div>
                      <div class="down">期限</div>
                  </div>
                  <div class="three">
                      <div class="up">装修</div>
                      <div class="down">用途</div>
                  </div>
              </div>
              <div class="tel_box">
                  <div class="tel">
                      123********
                  </div>
                  <van-icon name="phone" />
              </div>
          </div>
      </div>
      <div class="base_info">
          <div class="title">
              基本信息
          </div>
          <div class="item">
              <div class="left">年龄</div>
              <div class="desc">认证后可查看</div>
          </div>
          <div class="item">
              <div class="left">所在城市</div>
              <div class="desc">认证后可查看</div>
          </div>
          <div class="item">
              <div class="left">职业身份</div>
              <div class="desc">认证后可查看</div>
          </div>
          <div class="item">
              <div class="left">月收入</div>
              <div class="desc">认证后可查看</div>
          </div>
          <div class="item">
              <div class="left">本地社保</div>
              <div class="desc">认证后可查看</div>
          </div>
          <div class="item">
              <div class="left">本地公积金</div>
              <div class="desc">认证后可查看</div>
          </div>
          <div class="item">
              <div class="left">信用状况</div>
              <div class="desc">认证后可查看</div>
          </div>      
      </div>
      <div class="pro_info">
          <div class="title">
              资产信息
          </div>
          <div class="item">
              <div class="left">信用卡额度</div>
              <div class="desc">认证后可查看</div>
          </div> 
          <div class="item">
              <div class="left">芝麻分</div>
              <div class="desc">认证后可查看</div>
          </div> 
          <div class="item">
              <div class="left">微粒贷额度</div>
              <div class="desc">认证后可查看</div>
          </div> 
          <div class="item">
              <div class="left">名下房产</div>
              <div class="desc">认证后可查看</div>
          </div> 
          <div class="item">
              <div class="left">名下车产</div>
              <div class="desc">认证后可查看</div>
          </div> 
          <div class="item">
              <div class="left">商业保险</div>
              <div class="desc">认证后可查看</div>
          </div> 
      </div>
      <div class="foot_box">
          <div class="foot">
              <van-button disabled color="#FFEDED" >30抢单币</van-button>
              <van-button class="buy">认证后可购买</van-button>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'detail',
    data(){
        return{
            id:this.$route.query
        }
    },
    created(){
        console.log(this.id);
    },
    methods:{
        back(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
.wrap{
    width: 375px;
    // height: 100%;
    background: #f5f5f7;
    .title{
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        position: relative;
        .van-icon-arrow-left{
            position: absolute;
            left: 10px;
        }
        h4{
            font-weight: bold;
            font-size: 16px;
            letter-spacing: 1.5px;
        }
    }
    .card_box{
        height: 170px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        color: #fff;
        .card{
            width: 345px;
            height: 140px;
            background: #FF5A5A;
            border-radius: 10px 10px 0px 0px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-top: 10px;
            .top{
                display: flex;
                justify-content: space-between;
                padding: 0 10px;
                margin-top: 10px;
                .name{
                    font-size: 16px;
                }
            }
            .mid{
                display: flex;
                justify-content: space-around;
                .one,.two,.three{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .up{
                        font-weight: bold;
                        font-size: 21px;
                        margin-bottom: 4px;
                        letter-spacing: 2px;
                    }
                    .down{
                        margin-top: 4px;
                        font-size: 12px;
                        letter-spacing: 2px;
                    }
                }
            }
            .tel_box{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;
                background: #FF3D47;
                .tel{
                    display: flex;
                    align-items: center;
                    height: 38px;
                    color: #fff;
                    font-weight: bold;
                    font-size: 16px;
                    letter-spacing: 1px;
                }
            }
        }
    }
    .base_info{
        width: 345px;
        background: #fff;
        padding: 15px 14px;
        font-size: 14px;
        .title{
            display: block;
            font-weight: bold;
            font-size: 16px;
            height: 40px;
            line-height: 40px;
        }     
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 32px;
        .left{
            color: #1B2844;
            font-size: 15px;
        }
        .desc{
            font-size: 15px;
            color: #A1A8B2
        }
    }
    .pro_info{
        width: 345px;
        background: #fff;
        padding: 15px 14px;
        font-size: 14px;
        margin-top: 12px;
        .title{
            display: block;
            font-weight: bold;
            font-size: 16px;
            height: 40px;
            line-height: 40px;
        }
    }
    .foot_box{
        // height: 70px;
        background: #fff;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        .foot{
            display: flex;
            justify-content: center;
            padding: 16px 0 ;
            /deep/ .van-button--disabled{
                width: 140px !important;
                background: #FFEDED;
                box-shadow: 0px 2px 4px rgba(149, 149, 149, 0.1);
                border-radius: 5px 0px 0px 5px;
                font-size: 16px;
                letter-spacing: 1px;
                color: #EF3D46 !important;
            }
            /deep/ .buy{
                width: 180px !important;
                background: #EF3D46;
                box-shadow: 0px 2px 4px rgba(149, 149, 149, 0.1);
                border-radius: 0px 5px 5px 0px;
                color: #fff;
            }
        }
    }
}
</style>